<template>
	<a-modal :title="disabled ? '重新提交' : '物料替换'" :width="1200" :visible="visible" :maskClosable="false"
		:confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" :okText="disabled ? '重新替换申请' : '替换申请'">
		<a-spin :spinning="confirmLoading">
			<a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
				<a-row>
					<a-col :span="20">
						<a-form-item label="原物料">
							<div class="self_inputclass" :class="[disabled ? 'self_inputclass_disabled' : '']"
								@click="showEmsMaterialIndex1('rawMaterials')">
								<div>
									<span style="margin-left: 10px;">
										{{ rawMaterials.materialCode }}
									</span>
									<span style="margin-left: 10px;">
										{{ rawMaterials.materialName }}
									</span>
								</div>
							</div>
						</a-form-item>
					</a-col>
					<a-col :span="20">
						<a-form-item label="替代物料">
							<!-- <a-input allowClear placeholder="请选择 替代物料" /> -->
							<div class="self_inputclass" @click="showEmsMaterialIndex1('replaceMaterials')">
								<div>
									<span style="margin-left: 10px;">
										{{ replaceMaterials.materialCode }}
									</span>
									<span style="margin-left: 10px;">
										{{ replaceMaterials.materialName }}
									</span>
								</div>
							</div>
						</a-form-item>
					</a-col>

					<a-col :span="4" style="text-align: right;">
						<a-button type="primary" @click="handldQuery" :loading="queryLoading">
							{{ queryLoading ? '查询中...' : '查询' }}</a-button>
						<a-button @click="handldReset">重置</a-button>
					</a-col>
				</a-row>
			</a-form>

			<!-- table -->
			<div>
				<a-table :columns="columns" :data-source="sourceData" :rowKey="(record) => record.bomId"
					:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
					<!-- <span slot="image" slot-scope="text,record">
						<template>
							<image-preview :images="text" />
						</template>
</span> -->
					<span slot="image" slot-scope="text,record">
						<image-preview1 :images="text" :imageUrl="record.imageUrl" />
					</span>
					<span slot="action" slot-scope="text, record">
						<template>
							<a @click="$refs.editForm2.readonly(record)">详情</a>
						</template>
					</span>
					<span slot="action1" slot-scope="text, record">
						<template>
							<a @click="$refs.editForm.readOnly(record)">详情</a>
						</template>
					</span>

				</a-table>
			</div>
			<ems-material-index1 ref="emsMaterialIndex1" :on-row-selected="onEmsMaterialIndex1Selected" />
			<edit-form2 ref="editForm2" @ok="handleOk" />
			<edit-form ref="editForm" @ok="handleOk" />
		</a-spin>
	</a-modal>
</template>

<script>
import emsMaterialIndex1 from '../emsmaterial/emsMaterialIndex1'
import { page, emsReplaceApplyAdd } from '@/api/modular/main/emsbom/emsBomManage'
import { page as overseasPage } from '@/api/modular/main/emsmaterial/emsMaterialManage'
import editForm2 from './emsBomEditForm2'
import editForm from '../productStorehouse/overseasBaseTable/editForm.vue'
import { getUrlParam } from '@/utils/util'
export default {
	components: {
		emsMaterialIndex1,
		editForm2,
		editForm
	},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 3 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 20 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			formModel: {},
			columns: [
				{
					title: '序号', width: '80px',
					align: 'center',
					customRender: (text, record, index) => `${index + 1}`,
				},
				{
					title: 'BOM名称',
					dataIndex: 'bomName',
					ellipsis: true
				},
				{
					title: 'BOM编码',
					dataIndex: 'bomCode',
					ellipsis: true
				},
				{
					title: '分类',
					dataIndex: 'bomClassName',
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '200px',
					scopedSlots: { customRender: 'action' }
				}
			],
			sourceData: [],//关联bom列表
			rawMaterials: {
				materialCode: null,//料号
				materialName: null,//名称
			},//原物料
			replaceMaterials: {
				materialCode: null,//料号
				materialName: null,//名称
			},//替换物料			 
			queryLoading: false,
			selectedRowKeys: [],
			selectedRows: [],
			bomType: 1,//bom类型 类型:1基础bom 2组合bom 3海外仓
			disabled: false,
			replaceApplyId: null,
		}
	},
	computed: {
	},
	methods: {
		showEmsMaterialIndex1(type) {
			let materialType = null;
			let materialTypeList = [];
			let typeList = [
				this.$businessEnum.MATERIAL_TYPE_ENUM.material,
				this.$businessEnum.MATERIAL_TYPE_ENUM.customized,
				this.$businessEnum.MATERIAL_TYPE_ENUM.cable,
			]
			if (type == "replaceMaterials") {
				if (this.rawMaterials.materialCode == null) {
					this.$message.error("请先选择原物料");
					return
				}
				materialType = this.rawMaterials.materialType;

				materialTypeList = typeList
				// .filter(val => val.id == materialType)

			} else {
				if (this.disabled) {
					return
				}
				materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.material.id
				materialTypeList = [
					this.$businessEnum.MATERIAL_TYPE_ENUM.material,
					this.$businessEnum.MATERIAL_TYPE_ENUM.customized,
					this.$businessEnum.MATERIAL_TYPE_ENUM.cable,
				]
			}
			this.$refs.emsMaterialIndex1.show({
				materialType,
				materialTypeList
			}, {
				type: type,
				rawMaterials: this.rawMaterials.materialId,
			})
		},
		/**
		 * 根据原物料 查询关联bom
		 */
		handldQuery() {
			if (this.rawMaterials.materialCode == null) {
				this.$message.error("请先选择原物料");
				return
			}
			this.queryLoading = true;
			console.log("this.getBomType", this.getBomType);
			if (this.bomType == 3) {
				let params = {}
				if (this.disabled) {
					params = {
						materialType: "1501770962390024194",
						pageSize: -1,
						materialId: this.rawMaterials.materialId,
						isReplaceMaterial: 2,
						replaceApplyId: this.replaceApplyId
					}
				} else {
					params = {
						materialType: "1501770962390024194",
						pageSize: -1,
						materialId: this.rawMaterials.materialId,
						isReplaceMaterial: 1
					}
				}
				overseasPage(params).then(res => {
					this.queryLoading = false;
					this.sourceData = res.data.rows;
					if (this.disabled) {
						let selectedRowKeys = [];
						let selectedRows = [];
						this.sourceData.forEach(val => {
							if (val.isReplaceMaterial == 2) {
								selectedRows.push(val);
								selectedRowKeys.push(val.bomId);
							}
						})
						this.selectedRowKeys = selectedRowKeys;
						this.selectedRows = selectedRows;
						// setTimeout(() => {
						// 	this.$refs.table.updateSelect(selectedRowKeys, selectedRow)
						// }, 500)
					}
				}).catch(error => {
					this.queryLoading = false;
				})
			} else {
				let params = {}
				if (this.disabled) {
					params = {
						bomType: this.bomType,
						pageSize: -1,
						materialId: this.rawMaterials.materialId,
						isReplaceMaterial: 2,
						replaceApplyId: this.replaceApplyId
					}
				} else {
					params = {
						bomType: this.bomType,
						pageSize: -1,
						materialId: this.rawMaterials.materialId,
						isReplaceMaterial: 1
					}
				}
				page(params).then(res => {
					this.queryLoading = false;
					this.sourceData = res.data.rows;
					if (this.disabled) {
						let selectedRowKeys = [];
						let selectedRows = [];
						this.sourceData.forEach(val => {
							if (val.isReplaceMaterial == 2) {
								selectedRows.push(val);
								selectedRowKeys.push(val.bomId);
							}
						})
						this.selectedRowKeys = selectedRowKeys;
						this.selectedRows = selectedRows;
						// setTimeout(() => {
						// 	this.$refs.table.updateSelect(selectedRowKeys, selectedRow)
						// }, 200)
					}
				}).catch(error => {
					this.queryLoading = false;
				})
			}
		},
		handleOk() { },
		/**
		 * 重新提交
		 * @param record 
		 */
		resubmit(record) {
			console.log("resubmit-record", record);
			this.bomType = record.type;
			this.add(record.type);
			this.disabled = true;
			this.replaceApplyId = record.replaceApplyId;
			this.rawMaterials = record.emsMaterialResult

			this.replaceMaterials = record.replaceEmsMaterialResult;
			this.handldQuery();
		},
		/**
		 * 重置
		 */
		handldReset() {
			this.rawMaterials = {
				materialCode: null,//料号
				materialName: null,//名称
			}//原物料
			this.replaceMaterials = {
				materialCode: null,//料号
				materialName: null,//名称
			}//替换物料	
			this.sourceData = [];
		},
		add(record) {
			this.visible = true;
			this.bomType = record;
			console.log("this.bomType", this.bomType);
			if (this.bomType == 3) {
				this.columns = [
					{
						title: '序号', width: '80px',
						align: 'center',
						customRender: (text, record, index) => `${index + 1}`,
					},
					{
						title: '产品名称',
						dataIndex: 'materialName',
						ellipsis: true
					},
					{
						title: '料号',
						dataIndex: 'materialCode',
						ellipsis: true
					},
					{
						title: '规格',
						dataIndex: 'materialModelNumber',
					},
					{
						title: '图片',
						dataIndex: 'image',
						scopedSlots: { customRender: 'image' }
					},
					{
						title: '操作',
						dataIndex: 'action1',
						width: '200px',
						scopedSlots: { customRender: 'action1' }
					}
				]
			} else {
				this.columns = [
					{
						title: '序号', width: '80px',
						align: 'center',
						customRender: (text, record, index) => `${index + 1}`,
					},
					{
						title: 'BOM名称',
						dataIndex: 'bomName',
						// ellipsis: true
					},
					{
						title: 'BOM编码',
						dataIndex: 'bomCode',
						ellipsis: true
					},
					{
						title: '分类',
						width: '80px',
						dataIndex: 'bomClassName',
					},
					{
						title: '图片',
						dataIndex: 'image',
						width: '90px',
						scopedSlots: { customRender: 'image' }
					},
					{
						title: '操作',
						dataIndex: 'action',
						width: '80px',
						scopedSlots: { customRender: 'action' }
					}
				]
			}
			this.handldReset();
		},
		onEmsMaterialIndex1Selected(data) {
			if (data.rawMaterials) {
				this.rawMaterials = data.rawMaterials
			}
			if (data.replaceMaterials) {
				this.replaceMaterials = data.replaceMaterials
			}
			console.log("@@@data", data);
		},
		handleSubmit() {
			if (this.rawMaterials.materialCode == null || this.replaceMaterials.materialCode == null) {
				this.$message.error("原物料或者替换物料不能为空");
				return
			}
			if (this.selectedRowKeys.length == 0) {
				this.$message.error("至少勾选一条BOM");
				return
			}
			let that = this;
			this.$confirm({
				title: '提示',
				content: `是否将“${this.rawMaterials.materialName}”替换成“${this.replaceMaterials.materialName}”?`,
				okText: '确认',
				width: 500,
				centered: true,
				cancelText: '取消',
				onOk() {
					new Promise((resolve, reject) => {
						let replaceBomList = [];
						console.log("进入");

						if (that.bomType == 3) {
							replaceBomList = that.selectedRows.map(val => {
								return {
									bomId: val.bomId,
									materialId: val.materialId
								}
							})
						} else {
							replaceBomList = that.selectedRowKeys.map(val => {
								return {
									bomId: val
								}
							})
						}
						let param = {}
						if (that.disabled) {
							param = {
								type: that.bomType,
								materialId: that.rawMaterials.materialId,
								replaceMaterialId: that.replaceMaterials.materialId,
								replaceBomList: replaceBomList,
								replaceApplyId: that.replaceApplyId
							}
						} else {
							param = {
								type: that.bomType,
								materialId: that.rawMaterials.materialId,
								replaceMaterialId: that.replaceMaterials.materialId,
								replaceBomList: replaceBomList
							}
						}

						that.confirmLoading = true;
						emsReplaceApplyAdd(param).then(res => {
							console.log(res);
							if (res.code == 200) {
								that.$message.success("替换申请单提交成功");
								that.handldQuery()
								that.visible = false
								that.$emit("ok");
								that.confirmLoading = false;
								that.form.resetFields();
							}
						})
					})
				},
				onCancel() {
					return false;
				},
			});
		},
		handleCancel() {
			this.visible = false
			this.form.resetFields();
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys;
			this.selectedRows = selectedRows;
			console.log("selectedRowKeys", selectedRowKeys);
			console.log("selectedRows", selectedRows);
		},
	}
}
</script>
<style lang="less" scoped>
.self_inputclass {
	height: 30px;
	line-height: 30px;
	border-radius: 5px;
	width: 100%;
	border: 1px solid #D9D9D9;
	margin-top: 5px;
	cursor: pointer;
}

.self_inputclass_disabled {
	background-color: #E0E0E0;
}
</style>